{extend name="member/common/login_layout" /}

{block name="content"}
	<!-- PublicHeadLayout End -->
	<div id="append_parent"></div>
	<div id="ajaxwaitid"></div>
	
	<div class="nc-login-layout">
	    <div class="left-pic">
	    	<img src="{$lpic}" border="0">
	    </div>
	    <div class="nc-login">
	        <div class="arrow"></div>
	        <div class="nc-login-mode">
	            <ul class="tabs-nav">
	                <li><a href="#default">用户登录<i></i></a></li>
	                <li><a href="#mobile">手机验证码登录<i></i></a></li>
	            </ul>
	            <div id="tabs_container" class="tabs-container">
	                <div id="default" class="tabs-content">
	                    <form id="login_form" class="nc-login-form layui-form" method="post" action="">
	                        <!--<input type="hidden" name="__token__" value="{$Request.token}" />-->
	                        <dl>
	                            <dt>账&nbsp;&nbsp;&nbsp;号：</dt>
	                            <dd>
	                                <input type="text" class="text" autocomplete="off" name="username" lay-verify="username" tipMsg="已验证手机" id="user_name">
	                            </dd>
	                        </dl>
	                        <dl>
	                            <dt>密&nbsp;&nbsp;&nbsp;码：</dt>
	                            <dd>
	                                <input type="password" class="text" name="password" autocomplete="off" lay-verify="password" tipMsg="6-20个大小写英文字母、符号或数字" id="password">
	                            </dd>
	                        </dl>
	                        <div class="code-div mt15">
	                            <dl>
	                                <dt>验证码：</dt>
	                                <dd>
	                                    <input type="text" name="captcha" autocomplete="off" class="text w100" lay-verify="captcha" placeholder="输入验证码" id="captcha" size="10"/>
	                                </dd>
	                            </dl>
	                            <span>
	                                <img style="cursor: pointer; vertical-align: top;" onclick="this.src+='?rand='+Math.random();" src="{:url('verify_code')}" title="看不清？单击此处刷新" alt="captcha" />
	                            </span>
	                        </div>
	                        <div class="handle-div">
	                            <span class="auto">
	                                <input type="checkbox" name="auto_login" value="1" lay-skin="primary" title="七天自动登录">
	                            </span>
	
	                            <a class="forget" href="{:url('member/Login/forget_password')}">忘记密码？</a>
	                        </div>
	                        <div class="submit-div">
	                            <input type="submit" class="submit" lay-submit="" lay-filter="ajax_default_login" value="登&nbsp;&nbsp;&nbsp;录">
	                            <input type="hidden" value="{$ref_url}" name="ref_url">
	                        </div>
	                    </form>
	                </div>
	
	                <div id="mobile" class="tabs-content">
	                    <form id="post_form" method="post" class="nc-login-form layui-form" action="">
	                        <input type="hidden" name="__token__" value="{$Request.token}" />
	                        <dl>
	                            <dt>手机号：</dt>
	                            <dd>
	                                <input name="phone" type="text" class="text" id="phone" placeholder="可填写已注册的手机号接收短信" autocomplete="off" value="">
	                            </dd>
	                        </dl>
	
	                        <div class="tiptext" id="sms_text">正确输入上方验证码后，点击<span>
	                            <a href="javascript:void(0);" onclick="get_sms_captcha()">
	                            <i class="icon-mobile-phone"></i>发送手机验证码</a>
	                        </span>，查收短信将系统发送的“6位手机验证码”输入到下方验证后登录。
	                        </div>
	                        <dl>
	                            <dt>验证码：</dt>
	                            <dd>
	                                <input type="text" name="sms_captcha" autocomplete="off" class="text" placeholder="输入6位手机验证码" id="sms_captcha" size="15"/>
	                            </dd>
	                        </dl>
	                        <div class="submit-div">
	                            <input type="button" id="submit" class="submit" lay-submit="" lay-filter="ajax_mobile_login" value="登&nbsp;&nbsp;&nbsp;录">
	                            <input type="hidden" value="{$ref_url}" name="ref_url">
	                        </div>
	                    </form>
	                </div>
	            </div>
	        </div>
	        <div class="nc-login-api" id="demo-form-site">
	        </div>
	    </div>
	    <div class="clear"></div>
	</div>
	
	<div class="nc-login-api" id="demo-form-site">
      	{if (sysconf('qq_isuse') == 1 || sysconf('sina_isuse') == 1 || sysconf('weixin_isuse') == 1)}
		    <h4>使用合作网站账号登录：</h4>
		    {if (sysconf('qq_isuse') == 1)}
		      <a href="{:url('member/Connectqq/index')}" title="QQ账号登录" class="qq"><i></i>QQ</a>
		    {/if}
		    {if (sysconf('sina_isuse') == 1)}
		      <a href="{:url('member/Connectsina/index')}" title="新浪微博账号登录" class="sina"><i></i>新浪微博</a>
		    {/if}
		    {if (sysconf('weixin_isuse') == 1)}
		      <a href="javascript:void(0);" onclick="ajax_form('weixin_form', '微信账号登录', '{:url(\'member/ConnectWx/index\')}', 360);" title="微信账号登录" class="wx"><i></i>微信</a>
		    {/if}
      	{/if}
    </div>

	
	<script>
	    $(function () {
	        //初始化Input的灰色提示信息
	        $('input[tipMsg]').inputTipText({pwd: 'password'});
	        //登录方式切换
	        $('.nc-login-mode').tabulous({
	            effect: 'flip'//动画反转效果
	        });
	        var div_form = '#default';
	        $(".nc-login-mode .tabs-nav li a").click(function () {
	            if ($(this).attr("href") !== div_form) {
	                div_form = $(this).attr('href');
	                $("" + div_form).find(".makecode").trigger("click");
	            }
	        });
	
	//        $("#login_form").validate({
	//            errorPlacement: function (error, element) {
	//                var error_td = element.parent('dd');
	//                error_td.append(error);
	//                element.parents('dl:first').addClass('error');
	//            },
	//            success: function (label) {
	//                label.parents('dl:first').removeClass('error').find('label').remove();
	//            },
	//            submitHandler: function (form) {
	//                ajaxpost('login_form', '', '', 'onerror');
	//            },
	//            onkeyup: false,
	//            rules: {
	//                user_name: "required",
	//                password: "required"
	//                , captcha: {
	//                    required: true,
	////                    remote: {
	//////                        url: 'index.php?act=seccode&op=check&nchash=8ae8b76a',
	////                        url: '/home/Login/index',
	////                        type: 'get',
	////                        data: {
	////                            captcha: function () {
	////                                return $('#captcha').val();
	////                            }
	////                        },
	////                        complete: function (data) {
	////                            if (data.responseText == 'false') {
	////                                document.getElementById('codeimage').src = 'index.php?act=seccode&op=makecode&type=50,120&nchash=8ae8b76a&t=' + Math.random();
	////                            }
	////                        }
	////                    }
	//                }
	//            },
	//            messages: {
	//                user_name: "<i class='icon-exclamation-sign'></i>请输入已注册的用户名或手机号",
	//                password: "<i class='icon-exclamation-sign'></i>密码不能为空"
	//                , captcha: {
	//                    required: '<i class="icon-remove-circle" title="验证码不能为空"></i>',
	//                    remote: '<i class="icon-remove-circle" title="验证码不能为空"></i>'
	//                }
	//            }
	//        });
	
	        // 勾选自动登录显示隐藏文字
	        $('input[name="auto_login"]').click(function () {
	            if ($(this).attr('checked')) {
	                $(this).attr('checked', true).next().show();
	            } else {
	                $(this).attr('checked', false).next().hide();
	            }
	        });
	    });
	</script>
	<!--<script type="text/javascript" src="__PUBLIC__/static/shop/js/connect_sms.js" charset="utf-8"></script>-->
	
	<script>
	    function get_sms_captcha(){
	        if($("#phone").val().length == 11){
	//            document.getElementById('codeimage').src='index.php?act=seccode&op=makecode&type=50,120&nchash=$("#register_sms_captcha").val()&t=' + Math.random();
	//            var ajaxurl = 'index.php?act=connect_sms&op=get_captcha&nchash=1&type='+type;
	//            ajaxurl += '&captcha='+$('#image_captcha').val()+'&phone='+$('#phone').val();
	            $.ajax({
	                type: "GET",
	                url: "{:url('member/Login/sendSms',array('mobile'=>"+$('#phone').val()+"))}",
	                async: false,
	                success: function(res){
	                    if(res.code == 200) {
	                        $("#sms_text").html('短信验证码已发出');
	                    } else {
	//                        showError(res.message);
	                        layer.alert(res.message, {
	                            icon: 2
	                            ,skin: 'layer-ext-moon'
	                            ,time: 2000
	                        })
	
	                    }
	                }
	            });
	        }
	    }
	
	//    function check_captcha(){
	//        if($("#phone").val().length == 11 && $("#sms_captcha").val().length == 6){
	//            var ajaxurl = 'index.php?act=connect_sms&op=check_captcha';
	//            ajaxurl += '&sms_captcha='+$('#sms_captcha').val()+'&phone='+$('#phone').val();
	//            $.ajax({
	//                type: "GET",
	//                url: ajaxurl,
	//                async: false,
	//                success: function(rs){
	//                    if(rs == 'true') {
	//                        $.getScript('index.php?act=connect_sms&op=register'+'&phone='+$('#phone').val());
	//                        $("#register_sms_form").show();
	//                        $("#post_form").hide();
	//                    } else {
	//                        showError(rs);
	//                    }
	//                }
	//            });
	//        }
	//    }
	</script>
	
	<script>
	    $(function () {
	//        $("#post_form").validate({
	//
	//            errorPlacement: function (error, element) {
	//                var error_td = element.parent('dd');
	//                error_td.append(error);
	//                element.parents('dl:first').addClass('error');
	//            },
	//            success: function (label) {
	//                label.parents('dl:first').removeClass('error').find('label').remove();
	//            },
	//            submitHandler: function (form) {
	//                ajaxpost('post_form', '', '', 'onerror');
	//            },
	//            onkeyup: false,
	//            rules: {
	//                phone: {
	//                    required: true,
	//                    mobile: true
	//                },
	//                captcha: {
	//                    required: true,
	//                    minlength: 4,
	////                    remote: {
	//////                        url: 'index.php?act=seccode&op=check&nchash=8ae8b76a',
	////                        url: '/home/Login/index',
	////                        type: 'get',
	////                        data: {
	////                            captcha: function () {
	////                                return $('#image_captcha').val();
	////                            }
	////                        },
	////                        complete: function (data) {
	////                            if (data.responseText == 'false') {
	////                                document.getElementById('sms_codeimage').src = 'index.php?act=seccode&op=makecode&type=50,120&nchash=8ae8b76a&t=' + Math.random();
	////                            }
	////                        }
	////                    }
	//                },
	//                sms_captcha: {
	//                    required: function (element) {
	//                        return $("#image_captcha").val().length == 4;
	//                    },
	//                    minlength: 6
	//                }
	//            },
	//            messages: {
	//                phone: {
	//                    required: '<i class="icon-exclamation-sign"></i>请输入正确的手机号',
	//                    mobile: '<i class="icon-exclamation-sign"></i>请输入正确的手机号'
	//                },
	//                captcha: {
	//                    required: '<i class="icon-remove-circle" title="请输入正确的验证码"></i>',
	//                    minlength: '<i class="icon-remove-circle" title="请输入正确的验证码"></i>',
	//                    remote: '<i class="icon-remove-circle" title="请输入正确的验证码"></i>'
	//                },
	//                sms_captcha: {
	//                    required: '<i class="icon-exclamation-sign"></i>请输入六位短信验证码',
	//                    minlength: '<i class="icon-exclamation-sign"></i>请输入六位短信验证码'
	//                }
	//            }
	//        });
	    });
	</script>
	
	
	<script>
	    layui.use(['form'], function() {
	        var form = layui.form;
	
	        //自定义验证规则
	        form.verify({
	            username: function(value){
	                if(value == '已验证手机' || value.length < 1){
	                    return '登录账号不能为空';
	                }
	            },
	            password: function(value){
	                if(value == '6-20个大小写英文字母、符号或数字' || value.length < 1){
	                    return '密码不能为空';
	                }
	            },
	            captcha: function(value){
	                if(value == '输入验证码'){
	                    return '验证码不能为空';
	                }
	                if(value.length < 4){
	                    return '验证码至少为4位';
	                }
	            }
	        });
	
	        // ajax 提交
	        form.on('submit(ajax_default_login)', function(data){
	            data.field.login_type = 'username';
	            $.post('{:url("member/Login/login")}',data.field,function(res){
	
	                popup_jump(res, 1);
	            });
	            return false;
	        });
	
	        form.on('submit(ajax_mobile_login)', function(data){
	            data.field.login_type = 'mobile';
	            $.post('{:url("member/Login/login")}',data.field,function(res){
	
	//                console.log(data.field);
	                popup_jump(res, 1);
	            });
	            return false;
	        });
	    });
	</script>
	
{/block}
